<template>
	<view style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<!-- 下面是通知消息栏 -->
		<uni-notice-bar
			style="display: flex;margin-top: 15rpx; border-radius: 15rpx;border: 3rpx  black solid; backgroundColor:white;"
			show-icon scrollable color="black" text="信运欣 为你信用保驾护航 全网内测" />
		</uni-section>
		<!-- 轮播图 -->
		<view style="position: relative;z-index: 2;width: 95%;margin:15rpx auto 0 auto;">
			<u-swiper radius="5" height="300rpx" :index="index" :list="bannerlists" :circular="true"
				imgMode="scaleToFill" interval='3000'></u-swiper>
		</view>
		<view style="display: flex;width: 95%;margin:40rpx auto;justify-content: space-around;">
			<image @click="open_pop(1)" style="width: 170rpx;" src="../../static/menu/4.png" mode="widthFix"></image>
			<image @click="open_pop(2)" style="width: 170rpx;" src="../../static/menu/1.png" mode="widthFix"></image>
			<image @click="open_pop(3)" style="width: 170rpx;" src="../../static/menu/3.png" mode="widthFix"></image>
			<image @click="open_pop(4)" style="width: 170rpx;" src="../../static/menu/2.png" mode="widthFix"></image>
		</view>
		<view style="display: flex;width: 95%;margin:0 auto 40rpx auto;justify-content: space-around;">
			<image @click="open_pop(5)" style="width: 170rpx;" src="../../static/menu/6.png" mode="widthFix"></image>
			<image @click="open_pop(6)" style="width: 170rpx;" src="../../static/menu/7.png" mode="widthFix"></image>
			<image @click="open_pop(7)" style="width: 170rpx;" src="../../static/menu/5.png" mode="widthFix"></image>
			<image @click="open_pop(8)" style="width: 170rpx;" src="../../static/menu/8.png" mode="widthFix"></image>
		</view>
		<view style="display: flex;width: 95%;margin:0 auto 40rpx auto;justify-content: space-around;">
			<image @click="caidan('../../pages/fenxiang/fenxiang')" style="width: 170rpx;" src="../../static/menu/9.png"
				mode="widthFix"></image>
			<image style="width: 170rpx;" src="../../static/menu/0.png" mode="widthFix"></image>
			<image @click="caidan('../../pages/daili_list/daili_list')" style="width: 170rpx;"
				src="../../static/menu/11.png" mode="widthFix"></image>
			<image @click="open_pop(12)" style="width: 170rpx;" src="../../static/menu/12.png" mode="widthFix"></image>
		</view>
		<view style="display: flex;width: 95%;margin:0 auto 40rpx auto;justify-content: space-around;">
			<image style="width: 300rpx;border-radius: 15rpx;" src="../../static/menu/13.png" mode="widthFix"></image>
		</view>
		<view style="display: flex;width: 95%;margin:0 auto;justify-content: space-around;">
			<view
				style="display: flex; width: 300rpx;height: 130rpx; border-radius: 15rpx;background: url(../../static/menu/14.png) no-repeat;background-size: 100% 100%; ">
				<text style="margin-top:60rpx;font-size:35rpx;color: white; margin-left: auto;margin-right: auto;">100
					元</text>
			</view>
			<view
				style="display: flex; width: 300rpx;height: 130rpx; border-radius: 15rpx;background: url(../../static/menu/15.png) no-repeat;background-size: 100% 100%; ">
				<text
					style="margin-top:60rpx;font-size:35rpx;color: white; margin-left: auto;margin-right: auto;">100元</text>
			</view>

		</view>
		<uni-popup ref="popup">
		  <view style="width: 740rpx; position: relative;">
		    <!-- 可滚动容器 -->
		    <scroll-view style=" overflow-y: auto;" scroll-y="true">
		      <view style="display: flex; flex-direction: column;">
		        <image style="width: 100%;" :src="tupian" mode="widthFix"></image>
		        <image style="margin: 10rpx auto; width: 50%;" src="../../static/menu/erji/11.png" mode="widthFix"></image>
		      </view>
		    </scroll-view>
		    
		    <!-- 关闭按钮 - 使用绝对定位 -->
		    <button class="close-button" @click="closePopup">X</button>
		  </view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tupian: '',
				xinyunxin_userinfo: {
					permission: []
				},
				index: '',
				bannerlists: []
			}
		},
		async onLoad() {
			this.bannerlists = uni.getStorageSync('xinyunxin_bannerlists')
			this.xinyunxin_userinfo = await uniCloud.getCurrentUserInfo()
			this.xinyunxin_name_tel_fun()
			this.bannerlists_fun()
		},
		methods: {
			closePopup() {
				// 如果是通过v - model控制
				// this.showPopup = false;
				// 如果是通过ref引用
				this.$refs.popup.close();
			},
			open_pop(e) {
				if(e==1){
					this.tupian = '../../static/menu/erji/1.png'
				}else if(e==2){
					this.tupian = '../../static/menu/erji/10.png'
				}else if(e==3){
					this.tupian = '../../static/menu/erji/2.png'
				}else if(e==4){
					this.tupian = '../../static/menu/erji/3.png'
				}else if(e==5){
					this.tupian = '../../static/menu/erji/6.png'
				}else if(e==6){
					this.tupian = '../../static/menu/erji/5.png'
				}else if(e==7){
					this.tupian = '../../static/menu/erji/7.png'
				}else if(e==8){
					this.tupian = '../../static/menu/erji/8.png'
				}else if(e==12){
					this.tupian = '../../static/menu/erji/9.jpg'
				}
				this.$refs.popup.open("center")
			},
			tanchuang(e) {
				// e为1时，弹出pop窗口，显示图片1


			},
			// 获取自己的名字和电话并入缓存
			xinyunxin_name_tel_fun() {
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 12, //类型为1时，获取我管理的校区
						tiaojian: {
							_id: this.xinyunxin_userinfo.uid
						}
					}
				}).then(res => {
					console.log("444", res);
					uni.setStorageSync('xinyunxin_name_tel', res.result.data[0])
				})
			},

			// 点菜单时程序 
			caidan(e) {
				uni.navigateTo({
					url: e,
				})
			},
			//获取轮播图信息
			bannerlists_fun() {
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 3, //获取轮播图片
					}
				}).then(res => {
					this.bannerlists = res.result.res.data
					uni.setStorageSync('xinyunxin_bannerlists', res.result.res.data)
				})
			},
		}
	}
</script>

<style>
	
	
	scroll-view {
	  height: 100vh; /* 设置高度为视口高度的80% */
	}
	.close-button {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: white;
		color: black;
		border: none;
		font-size: 30rpx;
		line-height: 50rpx;
		border-radius: 50%;
	}

	page {
		/* 背景图是16.png */
		background: url(../../static/menu/16.png) no-repeat;
		background-size: 100% 100%;

	}
</style>